<template>
  <div>
    <div class="title">求职意向</div>
    <div class="flex mainlist-hovers" v-show="isEditing">
      <el-form :model="intention" :rules="rules" ref="formRef" label-width="100px" label-position="top">
        <div class="demo-ruleForm flex-between flex-wrap">
          <el-form-item label="期望职位" prop="post" class="w-6/12">
            <el-select v-model="intention.post.id" placeholder="请选择" @change="handlePostChange">
              <el-option v-for="item in postData" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="期望城市" prop="city" class="w-6/12">
            <el-select v-model="intention.city" :multiple-limit="3" multiple filterable
              placeholder="请选择城市标签">
              <el-option v-for="city in cities" :key="city.id" :label="city.name" :value="city.name" />
            </el-select>
          </el-form-item>
          <el-form-item label="期望月薪" prop="salary" class="yuexin w-6/12">
            <el-select v-model="intention.salary[0]" placeholder="请选择">
              <el-option v-for="item in monthlyfrom" :key="item.id" :label="item.value" :value="item.label" />
            </el-select>
            <div class="hang">-</div>
            <el-select v-model="intention.salary[1]" placeholder="请选择">
              <el-option v-for="item in monthlyfrom" :key="item.id" :label="item.value" :value="item.label" />
            </el-select>
          </el-form-item>
        </div>
        <el-form-item class="flex">
          <div class="flex1"></div>
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="save">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="flex mainlist-hover mainlist-hovers" @mouseenter="isHovered = true" @mouseleave="isHovered = false"
      v-if="!isEditing">
      <div class="name">{{ intention.post.name }}</div>
      <div class="flex left-money">
        <img src="../../assets/home/money.png" alt="">
        <div>{{ intention.salary[0] }}-{{ intention.salary[1] }}</div>
      </div>
      <div class="flex left-money flex1">
        <img src="../../assets/home/map.png" alt="">
        <div v-for="(city, index) in intention.city" :key="index" class="city">{{ city }}</div>
      </div>
      <div class="flex bianji" v-show="isHovered" @click="isEditing = true">
        <img src="../../assets/home/bianji.png" alt="">
        编辑
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, toRefs } from 'vue';
const formRef = ref(null)
const props = defineProps({
  intention: {
    type: Object,
    default: () => {
      return {
        post: { name: '' },
        city: [],
        salary: []
      };
    }
  },
  postData: {
    type: Array,
    default: () => []
  },
  cities: {
    type: Array,
    default: () => []
  },
  monthlyfrom: {
    type: Array,
    default: () => []
  }
});
// 使用计算属性来管理内部数据
const { intention } = toRefs(props);
const emit = defineEmits(['save']);

const isEditing = ref(false);
const isHovered = ref(false);

const rules = {
  post: [{ required: true, message: '请选择期望职位', trigger: 'change' }],
  city: [{ required: true, message: '请选择期望城市', trigger: 'change' }],
  salary: [{ required: true, message: '请选择期望月薪', trigger: 'change' }]
};

const handlePostChange = (value) => {
  const obj = props.postData.find((item) => item.id === value);
  intention.value.post = {
    id: obj.id,
    name: obj.name
  };
};

const save = async () => {
  if (!formRef.value) return
  try {
    await formRef.value.validate()
    emit('save', {
      type: 'intention',
      data: intention.value
    });
    isEditing.value = false;
  } catch (error) {
    // ElMessage.error('保存失败');
  }
};

const cancel = () => {
  formRef.value.resetFields()
  isEditing.value = false;
};

</script>
<style scoped>
@import url("./cmmon.scss");
</style>
